<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swp_01">
                <hdjsBtn></hdjsBtn>
            	<router-link v-show="zjcxvalue" :to="{path:'/draw',query:{zjcx:1}}" class="zjcx">中奖查询></router-link>
                <div class="jiantou"></div>
            </div>
            <div class="swiper-slide swp_02">
                <hdjsBtn></hdjsBtn>
                <router-link to="/answer"><div class="alertBtn">开始揭秘</div></router-link>
            </div>
        </div>
        <hdjs v-show="hdjsvalue"></hdjs>
    </div>
</template>

<script>
export default {
    name:'activity',
    data(){
        return{
            hdjsvalue:false,
            zjcxvalue:false
        }
    },
    created(){
        this.$axios.get('/index/getInfo')
        .then((data)=>{
        console.log(data)
        })
        .catch((err)=>{
        console.log(err)
        })
    },
    mounted(){
        let swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            direction: 'vertical',
            observer:true,
            observeParents:true
        });
        if(this.$route.query.back == 1){
            this.zjcxvalue = true
        }
        this.center.$on("showHdjs",(value)=>{
            this.hdjsvalue = value;
        })
    }
}
</script>

<style>
.swiper-container {
    width: 100%;
    height: 160.8vw;
}
.swiper-slide {
	position: relative;
}
.swp_01{
    background: url(../../static/img/swp_01.png) no-repeat;
    background-size: 100%;
}
.swp_02{
    background: url(../../static/img/swp_02.png) no-repeat;
    background-size: 100%;
}
.jiantou{
	position: absolute;
	width: 6.4vw;
	height: 3.07vw;
	left: 50%;
	bottom: 0.67vw;
	margin-left: -3.2vw;
	background-position: -19.2vw -7.73vw;
	animation:jiantou 1s infinite;
	-webkit-animation:jiantou 1s infinite;
    background: url(../../static/img/jt.png);
    background-size: 6.4vw 3.07vw;
}
@keyframes jiantou
{
50% {transform:translateY(-2.13vw);}
100% {transform:translateY(0);}
}

@-webkit-keyframes jiantou
{
50% {transform:translateY(-2.13vw);}
100% {transform:translateY(0);}
}
.swp_02 .alertBtn{
	position: absolute;
	width: 30vw;
	height: 6.66;
	background: #b01f24;
	color: #fff;
	line-height: 6.67vw;
	font-weight: 1000;
	text-align: center;
	font-size: 3.2vw;
	border-radius: 0.8vw;
	bottom: 8.2vw;
	left: 50%;
	margin-left: -15vw;
}
.zjcx{
	position: absolute;
	bottom: 4.67vw;
	right: 4.53vw;
	color: #fff;
	font-size: 3.2vw;
}
</style>
